<!--
 * @Author: 小花
 * @Date: 2022-03-06 14:37:46
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-20 10:41:39
 * @Description: 
-->
<template>
  <el-collapse v-model="historyAnnouncement">
    <el-collapse-item name="1">
      <template #title>
        <i class="fa fa-bullhorn" aria-hidden="true"></i>&nbsp;公告
      </template>
      <el-alert v-for="item in pageAnnouncementList" :key="item.id" :title="item.title"
        :type="item.alertType || 'info'" :closable="false">
        <div class="layout">
          <div class="content">{{ item.content }}</div>
          <div class="about">
            <div class="issueAuthor">
              <i class="fa fa-user-circle-o"></i>&nbsp;{{ item.issueAuthor }}
            </div>
            <div class="issueTime">
              <span><i class="fa fa-clock-o"
                  aria-hidden="true"></i>&nbsp;{{ item.issueTime }}</span>
            </div>
          </div>
        </div>
      </el-alert>
      <div class="pagination">
        <el-pagination @size-change="val => announcementPagination.pageSize = val"
          @current-change="val => announcementPagination.currentPage = val"
          :current-page="announcementPagination.currentPage"
          :pager-count="announcementPagination.pagerCount"
          :page-sizes="announcementPagination.pageSizes"
          :page-size="announcementPagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="announcementPagination.total"
          background>
        </el-pagination>
      </div>
    </el-collapse-item>
  </el-collapse>
  <div class='repairCenter_container'>
    <el-table
      :data="tableData.slice((pagination.currentPage-1)*pagination.pageSize, pagination.currentPage*pagination.pageSize)"
      border :header-cell-style="{background:'#F3F4F7',color:'#555'}"
      :default-sort="{prop: 'repairDate', order: 'descending'}" @filter-change="filterTagTable"
      style="width: 100%">
      <el-table-column type="index" align="center" width="60" :index="tableIndex">
      </el-table-column>
      <el-table-column highlight-current-row align="center" prop="orderId" label="单号">
      </el-table-column>
      <el-table-column align="center" prop="repairContent" label="报修问题">
      </el-table-column>
      <el-table-column align="center" prop="repairTypeEntity.typeValue" label="报修类型">
      </el-table-column>
      <el-table-column align="center" prop="repairStatusEntity.statusValue" label="报修状态"
        :filters="repairStatusFilters" filter-placement="bottom-end" column-key="aStatus">
        <template #default="scope">
          <el-tag :type="repairStatusStyle(scope.row.statusCode)" effect="light"
            disable-transitions>
            {{scope.row.repairStatusEntity.statusValue}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="repairDate" label="报修时间" width="200" sortable>
      </el-table-column>
      <el-table-column align="center" label="图片资料">
        <template #default="scope">
          <el-image style="width: 30px; height: 30px; margin: 5px;" v-for="url in scope.row.imgUrl"
            :key="url" :src="url" fit="fill" :preview-src-list="scope.row.imgUrl" slot="reference">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" class="acceptOrder" plain @click="acceptOrder(scope.row)">接单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="val=>pagination.pageSize = val"
        @current-change="val=>pagination.currentPage = val" :current-page="pagination.currentPage"
        :pager-count="pagination.pagerCount" :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { useMainStore } from '@/js/store.js'
import { imgUrlAddress, repairStatusStyle } from '@/js/public.js'
import nProgress from 'nprogress';
var that;
export default {
  data () {
    //这里存放数据
    return {
      store: useMainStore(),
      historyAnnouncement: '1',
      announcementList: [],
      announcementPagination: {
        pageSize: 3,
        pageSizes: [3, 10, 100, 200],
        pagerCount: 5,
        currentPage: 1,
        total: 0
      },
      tableData: [],
      tableDataF: [],
      pagination: {
        pageSize: 10,
        pageSizes: [10, 50, 100, 200],
        pagerCount: 5,
        currentPage: 1,
        total: 0,
      },
      queryList: {
        aStatus: []
      },
      repairStatusStyle,
    }
  },
  //监听属性 类似于data概念
  computed: {
    repairStatusFilters () {
      let filters = new Array();
      this.store.repairStatus?.forEach((item, idx) => {
        let obj = {
          text: item.statusValue,
          value: item.statusValue
        }
        filters.push(obj);
      })
      return filters;
    },
    'pageAnnouncementList': function () {
      return this.announcementList.slice(
        (this.announcementPagination.currentPage - 1) * this.announcementPagination.pageSize, this.announcementPagination.currentPage * this.announcementPagination.pageSize
      )
    },
  },
  //监控data中的数据变化
  watch: {
    tableData: function (val) {
      this.pagination.total = val.length;
    }
  },
  //方法集合
  methods: {
    /**
     * @description: 后端拉取所有公告信息
     * @param {*}
     * @return {*}
     */
    async execPullAllAnnouncement () {
      const result = await (await this.axios.get('/userHome/pullAllAnnouncement')).data
      if (result.code === 43000) {
        this.announcementList = result.data || []
        this.announcementList.sort(function (a, b) {
          return b.issueTime < a.issueTime ? -1 : 1
        })
        this.announcementPagination.total = this.announcementList.length
      } else if (result.code === 43001) {
        ElMessage.warning(result.msg)
      }
    },
    acceptOrder (row) {
      let data = JSON.parse(JSON.stringify(row));
      data.imgUrl = JSON.stringify(data.imgUrl);
      this.axios.post("/workerHome/acceptOrder", data).then(res => {
        if (res.data.code == 43000) {
          this.$message.success(res.data.msg);
          this.tableData.some((item, index) => {
            if (item.orderId == row.orderId) {
              this.tableData.splice(index, 1);
              return true;
            }
          })
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    tableIndex (index) {
      return (index + 1) + (this.pagination.currentPage - 1) * this.pagination.pageSize;
    },
    filterTagTable (filters) {
      this.queryList.aStatus = filters.aStatus;
      if (filters.aStatus) {
        this.tableDataF = this.tableData.filter((element, index, array) => {
          if (filters.aStatus.indexOf(element.repairStatusEntity.statusValue) != -1) return true;
          return false;
        })
      }
    },
    queryUserOrderRecord () {
      nProgress.start()
      this.axios.get("/workerHome/queryNewOrders").then(res => {
        this.tableData = res.data.data ? res.data.data.reverse() : [];
        this.tableData.forEach((item, idx) => {
          this.tableData[idx].imgUrl = imgUrlAddress(item.imgUrl);
        })
        nProgress.done()
      })
    },
    filterStatusVal (value, row) {
      return row.statusVal == value;
    },
    getRepairStatus () {
      if (this.store.repairStatus) return;
      this.axios.get("/userHome/repairStatus").then(res => {
        this.store.repairStatus = res.data.data;
      })
    },
    getRepairType () {
      if (this.store.repairType) return;
      this.axios.get("/userHome/repairType").then(res => {
        this.store.repairType = res.data.data;
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.queryUserOrderRecord();
    this.getRepairStatus();
    this.getRepairType();
    that = this;
    this.execPullAllAnnouncement()
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  .acceptOrder {
    width: 100%;
  }
}
.el-collapse {
  user-select: none;
  .el-alert {
    margin-bottom: 1rem;
    :deep(.el-alert__content) {
      width: 100%;
      .layout {
        .about {
          text-align: right;
        }
      }
    }
  }
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  align-items: center;
}
</style>